<template lang="">
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>我的上架</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-empty :image-size="200" v-if='tableData==""'></el-empty>
      <el-tabs v-model="activeName" @tab-click="handleClick" type="card" v-if='tableData!=""'>
        <el-tab-pane name='second'>
          <el-badge :max="99" class="item" slot="label">
            已成功商品
          </el-badge>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="商品 ID">
                    <span>{{ props.row.id }}</span>
                  </el-form-item>
                  <el-form-item label="商品名称">
                    <span>{{ props.row.namesd }}</span>
                  </el-form-item>
                  <el-form-item label="所属店铺">
                    <a href="#" style="color: #5e69ad;"><span>{{ props.row.Commodity }}</span></a>
                  </el-form-item>

                  <el-form-item label="商品编号">
                    <span>{{ props.row.Storeid }}</span>
                  </el-form-item>
                  <el-form-item label="商品分类">
                    <span>{{ props.row.classification }}</span>

                  </el-form-item>
                  <el-form-item label="店铺地址">
                    <span>{{ props.row.address }}</span>
                  </el-form-item>
                  <el-form-item label="商品描述">
                    <span>{{ props.row.describes }}</span>
                  </el-form-item>
                  <el-form-item label="商品图片">
                    <img :src="props.row.picture" alt="" srcset="" style="width: 200px;height: 200px;">
                  </el-form-item>
                  <el-form-item label="商品价格/元">
                    <span style="color: #e4393c;font-size: 20px;"><i style="font-style: normal;font-size: 14px;">￥</i>{{
                      props.row.Price|rounding
                      }}</span>
                  </el-form-item>
                </el-form>
              </template>
</el-table-column>
<el-table-column prop="id" label="商品ID">
</el-table-column>
<el-table-column prop="Storeid" label="商品编号">
</el-table-column>
<el-table-column label="商品上架者">
    <template v-slot='c'>
                <el-tag size="small">{{c.row.username}}</el-tag>
              </template>
</el-table-column>
<el-table-column label="商品审核者">
    <template v-slot='c'>
                <el-tag size="small">{{c.row.sh}}</el-tag>
              </template>
</el-table-column>
<el-table-column label="所属店铺">
    <template v-slot='v'>
                <a href="#" style="color: #5e69ad;"><span>{{ v.row.Commodity }}</span></a>
              </template>
</el-table-column>
<el-table-column prop="Repository" label="商品仓库/件">
</el-table-column>
<el-table-column prop="sell" label="商品出售/件">
</el-table-column>
<el-table-column label=" 上架时间">
    <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.datetimesd }}</span>
              </template>
</el-table-column>
<el-table-column label="操作">
    <template v-slot='scope'>
                <el-button size="mini" type="danger" v-permission="{action:'delete',effect:'disabled'}">下架
                </el-button>
              </template>
</el-table-column>
</el-table>

</el-tab-pane>
<el-tab-pane v-if='values!="0"'>
    <el-badge :value="values" :max="10" class="item" slot="label" type="warning">
        待审核商品
    </el-badge>
    <el-table :data="tableDatas" border style="width: 100%" v-if='tableData!=""'>
        <el-table-column type="expand">
            <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="商品 ID">
                    <span>{{ props.row.id }}</span>
                  </el-form-item>
                  <el-form-item label="商品名称">
                    <span>{{ props.row.nameeds }}</span>
                  </el-form-item>
                  <el-form-item label="所属店铺">
                    <a href="#" style="color: #5e69ad;"><span>{{ props.row.Commodity }}</span></a>
                  </el-form-item>

                  <el-form-item label="商品编号">
                    <span>{{ props.row.Storeid }}</span>
                  </el-form-item>
                  <el-form-item label="商品分类">
                    <span>{{ props.row.classification }}</span>

                  </el-form-item>
                  <el-form-item label="店铺地址">
                    <span>{{ props.row.address }}</span>
                  </el-form-item>
                  <el-form-item label="商品描述">
                    <span>{{ props.row.describes }}</span>
                  </el-form-item>
                  <el-form-item label="商品图片">
                    <img :src="props.row.picture" alt="" srcset="" style="width: 200px;height: 200px;">
                  </el-form-item>
                  <el-form-item label="商品价格/元">
                    <span style="color: #e4393c;font-size: 20px;"><i style="font-style: normal;font-size: 14px;">￥</i>{{
                      props.row.Price|rounding
                      }}</span>
                  </el-form-item>
                </el-form>
              </template>
        </el-table-column>
        <el-table-column prop="id" label="商品ID">
        </el-table-column>
        <el-table-column prop="Storeid" label="商品编号">
        </el-table-column>
        <el-table-column label="商品上架者">
            <template v-slot='c'>
                <el-tag size="small">{{c.row.username}}</el-tag>
              </template>
        </el-table-column>

        <el-table-column label="所属店铺">
            <template v-slot='v'>
                <a href="#" style="color: #5e69ad;"><span>{{ v.row.Commodity }}</span></a>

              </template>
        </el-table-column>
        <el-table-column label="审核状态">
            <template v-slot='v'>
                <el-tag type='warning'>{{ v.row.stare }}</el-tag>
              </template>
        </el-table-column>
        <el-table-column prop="Repository" label="商品仓库/件">
        </el-table-column>
        <el-table-column label=" 上架时间">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.datetime }}</span>
              </template>
        </el-table-column>
    </el-table>
</el-tab-pane>
<el-tab-pane v-if='valuew!="0"'>
    <el-badge :value="valuew" :max="99" class="item" slot="label">
        未通过商品
    </el-badge>
    <el-alert title="展开查看具体审核内容" type="info" center show-icon :closable="false" v-if='tableData!=""'>
    </el-alert>
    <el-table :data="tableDataw" border style="width: 100%" v-if='tableData!=""'>
        <el-table-column type="expand">

            <template slot-scope="props">
                <el-alert :title="'审核不通过：'+props.row.descs" type="error" effect="dark" v-if='props.row.descs!=""'>
                </el-alert>
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="商品 ID">

                    <span>{{ props.row.id }}</span>
                  </el-form-item>
                  <el-form-item label="商品名称">
                    <span>{{ props.row.namesd }}</span>
                  </el-form-item>
                  <el-form-item label="所属店铺">
                    <a href="#" style="color: #5e69ad;"><span>{{ props.row.Commodity }}</span></a>
                  </el-form-item>

                  <el-form-item label="商品编号">
                    <span>{{ props.row.Storeid }}</span>
                  </el-form-item>
                  <el-form-item label="商品分类">
                    <span>{{ props.row.classification }}</span>

                  </el-form-item>
                  <el-form-item label="店铺地址">
                    <span>{{ props.row.address }}</span>
                  </el-form-item>
                  <el-form-item label="商品描述">
                    <span>{{ props.row.describes }}</span>
                  </el-form-item>
                  <el-form-item label="商品图片">
                    <img :src="props.row.picture" alt="" srcset="" style="width: 200px;height: 200px;">
                  </el-form-item>
                  <el-form-item label="商品价格/元">
                    <span style="color: #e4393c;font-size: 20px;"><i style="font-style: normal;font-size: 14px;">￥</i>{{
                      props.row.Price|rounding
                      }}</span>
                  </el-form-item>
                </el-form>
              </template>
        </el-table-column>
        <el-table-column prop="id" label="商品ID">
        </el-table-column>
        <el-table-column prop="Storeid" label="商品编号">
        </el-table-column>
        <el-table-column label="商品上架者">
            <template v-slot='c'>
                <el-tag size="small">{{c.row.username}}</el-tag>
              </template>
        </el-table-column>
        <el-table-column label="商品审核者">
            <template v-slot='c'>
                <el-tag size="small">{{c.row.shlls}}</el-tag>
              </template>
        </el-table-column>
        <el-table-column label="所属店铺">
            <template v-slot='v'>
                <a href="#" style="color: #5e69ad;"><span>{{ v.row.Commodity }}</span></a>
              </template>
        </el-table-column>
        <el-table-column label="审核状态">
            <template slot-scope="scope">
                <el-tag :type="scope.row.stare === '未通过' ? 'warning' : 'success'" disable-transitions>
                  {{scope.row.stare}}
                </el-tag>
              </template>

        </el-table-column>
        <el-table-column prop="Repository" label="商品仓库/件">
        </el-table-column>
        <el-table-column label=" 上架时间">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.datetime }}</span>
              </template>
        </el-table-column>
    </el-table>
</el-tab-pane>
</el-tabs>

</el-card>
</div>
</template>
<script>
    export default {
        data() {
            return {
                tableData: [],
                tableDatas: [],
                tableDataw: [],
                activeName: 'second',
                values: 0,
                valuew: 0
            };
        },
        methods: {
            handleClick(tab, event) {
                /* console.log(tab, event); */
            },
            cgshop() {
                this.$axios.get('/shop/cgshop', {
                    params: {
                        name: this.$cookie.get('user')
                    }
                }).then(res => {
                    if (res.data.status == 'ok') {
                        this.tableData = res.data.result
                        this.values = res.data.quantity
                        this.valuew = res.data.quanh
                    }
                })
            },
            shshop() {
                this.$axios.get('/shop/shshop', {
                    params: {
                        name: this.$cookie.get('user')
                    }
                }).then(res => {
                    if (res.data.status == 'ok') {
                        this.tableDatas = res.data.result

                    }
                })
            },
            wtshop() {
                this.$axios.get('/shop/wtshop', {
                    params: {
                        name: this.$cookie.get('user')
                    }
                }).then(res => {
                    if (res.data.status == 'ok') {
                        this.tableDataw = res.data.result
                    }
                })
            }
        },
        //过滤器
        filters: {
            rounding(v) {
                return (Math.round(v * 100) / 100).toFixed(2);
            }
        },
        mounted() {
            this.cgshop()
            this.shshop()
            this.wtshop()
        },
    }
</script>
<style lang="less">
    .item {
        margin-top: 10px;
        margin-right: 5px;
    }
    
    .demo-table-expand {
        font-size: 0;
    }
    
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
    }
</style>